<!DOCTYPE html>
<html lang="en">

<body>
  
    <svg viewBox="0 0 100 100" width="200" height="200">
       <rect x="20" y="20" width="0" height="10" fill="#f00">
             <animate id="a51" attributeType="XML"
                 attributeName="width"
                 to="20"
                 dur="2s"
                 begin="t.click"
                 fill="freeze"
                 repeatCount="3"
                 />
        </rect>
 
        <rect x="40" y="30" width="0" height="10" fill="#f00">
             <animate  attributeType="XML"
                 attributeName="width"
                 to="20"
                 dur="2s"
                 begin="a51.repeat(2)"
                 fill="freeze"/>
         </rect>
		
		<text x="50" y="80" font-size="8" text-anchor="middle" id="t" style="cursor:pointer;user-select:none">点我</text>
    </svg>

    


</body>
</html>